<template>
<div>
  <div :style="{height:height+'px',width:width+'px'}" class="menu-wrapper">
    <div class="menu-title">
      <div class="title-line"></div>
      <div 
        :title="title" 
        :style="{'font-size': $attrs.fontSize,'font-weight' : $attrs.bold ? 'bold' : 'normal','font-style': $attrs.italic ? 'italic' : 'normal','text-decoration': $attrs.underline ? 'underline' : 'none','text-align': `${$attrs.textAlign}`,'color': `${$attrs.fontColor}`,'line-height': `${$attrs.lineHeight}`}"  
        class="title-name"
      >{{title}}</div>
      <div class="title-more" @click="jumpToPage">更多</div>
    </div>
    <el-table :data="tableData" stripe size="small" v-loading="tableLoading" class="tableInfo">
      <el-table-column label="序号" width="80" align="center" :show-overflow-tooltip="!wrap">
        <template slot-scope="scope">
          <span>{{scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="消息标题" align="center" :show-overflow-tooltip="!wrap">
        <template slot-scope="scope">
          <span style="color:#409eff;" @click="jumpToNotice">{{scope.row.title}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="processInstance.name" label="消息类型" align="center" :show-overflow-tooltip="!wrap">
        <template slot-scope="scope">
          <span>{{messageType[scope.row.type]}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="发布时间" align="center" :show-overflow-tooltip="!wrap">
        <template slot-scope="scope">{{getDateTime(scope.row.createTime)}}</template>
      </el-table-column>
    </el-table>
  </div>
  <div style="width:100%;height:20px;"></div>
</div>
</template>
<script>
  import {
    getMyMessage
  } from '@/api/custom/message';
  import {
  getMenu
  } from '@/api/system/menu';
  //消息通知类型
  const messageType = {
      0: '系统消息',
      1: '公告',
      2: '新闻',
      3: '会议',
      4: '通知'};
  export default {
    props: {
      width: { //宽度
        type: Number,
        default: '1000'
      },
      height: { //高度
        type: Number,
        default: '450'
      },
      title: { //标题
        type: String,
        default: '消息通知'
      },
      jumpTo: { //跳转功能
        type: Number,
        default: 0
      },
      maxRow: { //最大行
        type: Number,
        default: 10
      },
      wrap: { //换行
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        tableLoading: false,
        tableData: [],
        messageType: messageType
      }
    },
    mounted() {
      this.getNotices()
    },
    watch: {
      maxRow(val) {
        this.getNotices()
      }
    },
    methods: {
      //获取消息通知列表
      getNotices() {
        this.tableLoading = true
        let params = {
          pageNo: 1,
          pageSize: this.maxRow
        }
        getMyMessage(params).then((res) => {
          if (res.code === 0) {
            this.tableData = res.data.list
            this.tableLoading = false
          }
        }).catch(e => {
          console.log(e)
          this.tableLoading = false
        })
      },
      // async jumpToPage() {
      //   let toUrl = '/index'
      //   let urls = []
      //   let res = null
      //   while(true){
      //     res = await getMenu(res?res.data.parentId:this.jumpTo)
      //     if (res.code === 0) {
      //       if (res.data) {
      //         urls.push(res.data.path)
      //         if (res.data.parentId === 0) {
      //           break
      //         }
      //       } else {
      //         break
      //       }
      //     }
      //   }
      //   if(urls.length > 0) {
      //     toUrl = urls.reverse().join('/')
      //   }
      //   this.$router.push(toUrl)
      // },
      //跳转到我的消息，点击更多跳转
      jumpToPage() {
        const flag = this.$store.state.currentStep.clickFlag
        if(flag){
          this.$router.push('/message/myMessage')
        }
      },
      //跳转到我的消息，点击消息标题跳转
      jumpToNotice() {
        const flag = this.$store.state.currentStep.clickFlag
        if(flag){
          this.$router.push('/message/myMessage')
        }
      },
      //时间戳转日期时间
      getDateTime(time) {
        if (!time) return ''
        let date = new Date(time)
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        let hour = date.getHours()
        let minute = date.getMinutes()
        let second = date.getSeconds()
        return `${year}-${month<10?'0':''}${month}-${day<10?'0':''}${day} ${hour<10?'0':''}${hour}:${minute<10?'0':''}${minute}:${second<10?'0':''}${second}`
      },
    }
  }

</script>

<style lang="scss" scoped>
  .menu-wrapper {
    cursor: pointer;
    color: rgba(0, 0, 0, 0.45);
    font-size: 16px;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;

    .menu-title {
      width: 100%;
      height: 40px;
      line-height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      .title-line {
        margin: 0 10px;
        width: 5px;
        height: 20px;
        background: #409eff;
      } 
      .title-name {
        width:calc(100% - 50px);
        padding-right:2% ;
        overflow:hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
      .title-more {
        width: 45px;
        float: right;
        right: 0px;
        color: #409eff;
      }
    }

    .tableInfo {
      margin: 10px 0px;
      padding: 0px 10px;
      height: calc(100% - 60px);
      overflow: auto;
    }

  }

</style>
<style lang='scss'>
  .menu-wrapper {
    .tableInfo {
      .el-table__cell {
        // border-bottom: 0px;
        padding: 0px;
      }

      .el-table__fixed {
        height: 100% !important;
      }

      .el-table__fixed-right {
        height: 100% !important;
      }

      .el-table__fixed::before {
        background-color: transparent;
      }

      .el-table__fixed-right::before {
        background-color: transparent;
      }
    }

    .el-table {
      box-sizing: border-box;

      &::before {
        height: 0px;
      }
    }

    .el-table--border::after,
    .el-table--group::after {
      width: 0px;
      height: 0px;
    }

  }

</style>
